Tutorial 04-3D - Adding Zooming, Panning Behavior
Source code for this tutorial can be found at our SciChart.WPF.Examples Github Repository under Tutorials section.
Following on from Tutorial 03-3D - Adding Series to a 3D Chart
Adding Zooming, Panning Behavior
So far in the tutorial series, we have created a new 3D chart, added an X-Axis, Y-Axis and Z-Axis, some series and also some simple base modifiers. We are going to extend this now to add zoom, pan behavior to the chart. Modify the XAML from Tutorial 03 - Adding Series to a 3D Chart as follows:
Adding Zooming, Panning Behavior |
Copy Code |
---|---|
<Window x:Class="Tutorial_04_Adding_Zooming_Panning_Behavior.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s3D="http://schemas.abtsoftware.co.uk/scichart3D" Title="Tutorial 04 - Adding Zooming, Panning Behavior" Height="550" Width="800"> <Grid> <s3D:SciChart3DSurface x:Name="sciChart3DSurface"> <s3D:SciChart3DSurface.RenderableSeries> <s3D:PointLineRenderableSeries3D x:Name="pointLineSeries3D" IsAntialiased="True" StrokeThickness="2"> <s3D:PointLineRenderableSeries3D.PointMarker> <s3D:SpherePointMarker3D Opacity="0.5" Size="16"/> </s3D:PointLineRenderableSeries3D.PointMarker> </s3D:PointLineRenderableSeries3D> </s3D:SciChart3DSurface.RenderableSeries> <s3D:SciChart3DSurface.XAxis> <s3D:NumericAxis3D AxisTitle="X-Axis 3D"/> </s3D:SciChart3DSurface.XAxis> <s3D:SciChart3DSurface.YAxis> <s3D:NumericAxis3D AxisTitle="Y-Axis 3D"/> </s3D:SciChart3DSurface.YAxis> <s3D:SciChart3DSurface.ZAxis> <s3D:NumericAxis3D AxisTitle="Z-Axis 3D"/> </s3D:SciChart3DSurface.ZAxis> <s3D:SciChart3DSurface.ChartModifier> <s3D:ModifierGroup3D> <!-- Allows orbital motion of the Camera 3D on Left mouse drag --> <s3D:OrbitModifier3D/> <!-- Allows moving through the 3D World on Right mouse drag --> <s3D:FreeLookModifier3D ExecuteOn="MouseRightButton"/> <!-- Allows zooming the 3D World on mouse wheel --> <s3D:MouseWheelZoomModifier3D/> <!-- Allows zooming to fit on Left mouse double click --> <s3D:ZoomExtentsModifier3D ExecuteOn="MouseDoubleClick" ResetPosition="-485,536,-485" ResetTarget="0,100,0"/> </s3D:ModifierGroup3D> </s3D:SciChart3DSurface.ChartModifier> </s3D:SciChart3DSurface> </Grid> </Window> |
The above code adds a number of ChartModifiers3D to the SciChart3DSurface.
Now build and run the 3D chart
Congratulations! You now have added some modifier to a 3D chart. This is what you should see.
Try dragging with left/right mouse buttons, using mouse wheel and double clicking on the chart.
Further Reading
Each modifier above has its own configuration properties and are worthy of an article each!
You can find out more be clicking the links below.
- OrbitModifier3D - allows orbital motion of the Camera 3D on drag;
- FreeLookModifier3D - allows moving through the 3D World on drag;
- MouseWheelZoomModifier3D - allows zooming the 3D World on mouse wheel;
- PinchZoomModifier3D - allows zooming the 3D World on pinch touch gesture;
- ZoomExtentsModifier3D - allows zooming the 3D World to fit on double click.
See Also